<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 21</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        current: 'input-item'
      }
    },
    methods: {
      handleClick() {
        this.current === 'input-item' ? this.current = "common-item" : this.current = "input-item"
      }
    },
    template: `
  
    <div><keep-alive> <component :is="current"/></keep-alive></div>
   
    <button @click="handleClick">切换</button>
    `
  })
  app.component('input-item', {
    template: `<input value="input-item"/>`
  })
  app.component('common-item', {
    template: `<p>common-item</p>`
  })
  app.mount('#root')
</script>

</html>